<template>
  <Iconify
    class="qup-icon"
    :icon="icon"
    :width="size"
    :height="size"
    :stroke="qupIcon.stroke"
    :fill="qupIcon.fill"
    :color="qupIcon.color"
    :stroke-width="strokeWidth"
    ref="qupIcon"
  />
</template>

<script>
import "./utils/initQupIcon";
import { Icon as Iconify } from "./utils/iconify";

export default {
  name: "QupIcon",
  components: {
    Iconify
  },
  props: {
    icon: {
      type: String,
      required: true
    },
    // @enum type = line(线性) | fill（面性） | fillLine(线面结合)
    type: {
      type: String,
      default: "line"
    },
    color: {
      type: String | Array,
      default: "#000000"
    },
    // 只有线面结合的图标才有作用
    fillColor: {
      type: String,
      default: "#16bc83"
    },
    strokeWidth: {
      type: String | Number,
      default: "3"
    },
    size: {
      type: String | Number,
      default: "48"
    }
  },
  beforeMount() {
    this.qupIcon.isLinearGradient = Array.isArray(this.color);

    if (!this.qupIcon.isLinearGradient) {
      this.handleColor();
    } else {
      // 如果颜色是一个数组，则是渐变，并且图标强制为面性
      this.qupIcon.type = "fill";
    }
  },
  mounted() {
    if (this.qupIcon.isLinearGradient) {
      this.handleLinearGradient();
    }
  },
  data() {
    return {
      errorCount: 0,
      qupIcon: {
        isLinearGradient: false,
        stroke: "",
        fill: "",
        color: ""
      }
    };
  },
  methods: {
    handleLinearGradient() {
      try {
        const svgDom = this.$refs.qupIcon.$el;
        let defs = svgDom.querySelector("defs");

        if (!defs) {
          defs = document.createElementNS('http://www.w3.org/2000/svg',"defs")
          svgDom.firstChild.appendChild(defs);
        }

        const filterDoms = [...svgDom.querySelectorAll(".filter")];
        const [color1, color2] = this.color;

        let fragment = "";
        for (let i = 0; i < filterDoms.length; i++) {
          let id = `${this.icon}-linear-${Date.now()}-${i}`;
          const pathDom = filterDoms[i].firstChild;
          pathDom.setAttribute("fill", `url(#${id})`);

          fragment += `<linearGradient
              id="${id}"
              x1="50%"
              y1="0%"
              x2="50%"
              y2="100%"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="${color1}" ></stop>
              <stop offset="1" stop-color="${color2}" ></stop>
          </linearGradient>`;
        }

        defs.innerHTML += fragment;
      } catch (e) {
        this.errorCount++;

        if (this.errorCount <= 10) {
          setTimeout(() => {
            this.handleLinearGradient();
          }, 200);
        } else {
          console.warn("图标设置渐变错误：", e);
        }
      }
    },
    handleColor() {
      if (this.type === "line") {
        this.qupIcon = {
          stroke: this.color,
          color: this.color,
          fill: "transparent",
          isLinearGradient: false
        };
      }

      if (this.type === "fill") {
        this.qupIcon = {
          stroke: this.color,
          color: "transparent",
          fill: this.color,
          isLinearGradient: false
        };
      }

      if (this.type === "fillLine") {
        this.qupIcon = {
          stroke: this.color,
          color: this.color,
          fill: this.fillColor,
          isLinearGradient: false
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>>
